<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-show="!institutionDetailShow">
      <div class="table">
        <div class="container">
          <el-table v-loading="" :data="CheckUnitListTableData"   max-height="800" style="width: 100%" >
            <el-table-column fixed prop="id" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="checkName" label="机构名称" width="300">
              <template slot-scope="scope">
                <el-button type="text"   style="text-decoration: underline; color: #606266" @click="gotoDetail(scope.row)" >
                  {{ scope.row.checkName }}</el-button >
              </template>
            </el-table-column>
            <el-table-column prop="approvalNumAddr" label="检验机构核准证号、地址" width="300">
            </el-table-column>
            <el-table-column prop="sydwCount" label="服务单位总数" width="180">
            </el-table-column>
            <el-table-column prop="checkDevCount" label="检验设备数量" width="180">
            </el-table-column>
            <el-table-column  prop="checkRecordCount"   label="检验报告数量" width="200"  >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="checkUnitListTablePageSizeChange"
            @current-change="checkUnitListTablePageChange"
            :current-page="CheckUnitListCurrentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="CheckUnitListArgs.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="CheckUnitListTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-show="institutionDetailShow">
         <InstitutionDetail :institution="institution"></InstitutionDetail>
    </div>

  </el-card>
</template>

<script>
import Breadcrumb from "../BreadCrumb/BreadCrumb.vue";
import {
  CheckUnitListSearchArgs, CheckUnitDetailSearchArgs, CheckUnitSydwListSearchArgs,
  searchCheckUnitList, searchCheckUnitDetailData, searchCheckUnitSydwList,
} from "../../../../api/chuguan/data-service";
import InstitutionDetail from "./checkUnit/InstitutionDetail.vue";

export default {
  data() {
    return {
      // 导航树相关数据
      naviItems: [ { text: "储罐" }, { text: "云服检验", to: "/chuguan/dataCloudService/check" },  ],

      institutionDetailShow:false,  //控制点击机构名称后显示机构相关细节的展示
      institution: {},

      // 检验单位列表表格相关数据
      CheckUnitListLoading: true,
      CheckUnitListTableData: [
        {
           id:'1',institutionName:'山东特检院',approvalNumAddr:"TS7110440-2020",sydwCount:"46",checkDevCount:"50",checkRecordCount:"50\n"
        },
        {
          id:'2',institutionName:"铜陵市特检院",approvalNumAddr:"",sydwCount:"189",checkDevCount:"216",checkRecordCount:"216"
        },
        {
          id:'3',institutionName:"中国特检院",approvalNumAddr:"TS7110001-2022",sydwCount:"15",checkDevCount:"17",checkRecordCount:"18"
        }
      ],
      CheckUnitListTotal: 2,
      CheckUnitListCurrentPage: 1,
      CheckUnitListArgs: new CheckUnitListSearchArgs(),

    };
  },
  async created() {
      await this.searchCheckUnitList()
  },
  components: {
    Breadcrumb,
    InstitutionDetail,
  },
  methods: {
    // 获取检验单位列表数据
    async searchCheckUnitList() {
      //得到返回的所有数据，用于进行数据筛选,目的为得到特检院的个数
      this.CheckUnitListArgs.pageSize=146
      const _temp = await searchCheckUnitList(this.CheckUnitListArgs);  //中间变量，可以忽略
      const temp_=_temp.data.data  //所有储罐列表
      var jgmcAll=[]               //所有检查机构名
      for(let i in temp_){
        if(i==121){ //第121条数据检验名为空
          console.log(temp_[i])
        }
        jgmcAll.push(temp_[i].f027)
      }
      const temp=[]               //不带重复名称的检查机构名
      for(let i in jgmcAll){
        if(temp.indexOf(jgmcAll[i])==-1&&jgmcAll.length>1){ //功能：去除重复名
          temp.push(jgmcAll[i])
        }
      }
      var objs=[]   //存储筛选过的机构
      let id=0
      for(let j in temp){
        let sydw=[]
        let checkDev=[]
        let checkRecord=[]
        for(let i in temp_){
           if(temp[j]==temp_[i].f027){
             sydw.push(temp_[i].f001)
             checkDev.push(temp_[i].f002)
             checkRecord.push(temp_[i].f035)
           }
        }
        let temp1=[]
        let temp2=[]
        let temp3=[]
        for(let i in sydw){
          if(temp1.indexOf(sydw[i])==-1){ //功能：去除重复名
            temp1.push(sydw[i])
          }
        }
        for(let i in checkDev){
          if(temp2.indexOf(checkDev[i])==-1){ //功能：去除重复名
            temp2.push(checkDev[i])
          }
        }
        for(let i in checkRecord){
          if(temp3.indexOf(checkRecord[i])==-1){ //功能：去除重复名
            temp3.push(checkRecord[i])
          }
        }
        id=id+1
        let obj={
          id:id,
          checkName:temp[j],
          approvalNumAddr:'',
          sydwCount:temp1.length,
          checkDevCount:temp3.length,
          checkRecordCount:temp3.length
        }
        objs.push(obj)
      }
      if(objs!==null&&objs.length>0){
        this.CheckUnitListTableData = objs;
      }
      this.CheckUnitListTotal=objs.length
      console.log("log请求数据："+JSON.stringify(objs))
    },
    // 检验单位列表表格页面大小改变
    async checkUnitListTablePageSizeChange(pageSize) {
      this.CheckUnitListArgs.num = pageSize;
      this.CheckUnitListArgs.offset = 0;
      await this.searchCheckUnitList();
    },
    // 检验单位列表表格页码改变
    async checkUnitListTablePageChange(page) {
      this.CheckUnitListArgs.offset = (page - 1) * this.CheckUnitListArgs.num;
      this.CheckUnitListCurrentPage = page;
      await this.searchCheckUnitList();
    },
    // 跳转到某个检验单位的详情页面
    gotoDetail(institution) {
         this.institutionDetailShow=true;
         this.institution=institution;
         console.log(institution)
    },
  }
};
</script>

<style lang="less" scoped>
div.table {
  width: 135%;
  margin-left: 60px;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  // justify-content: center;
  div.container {
    width: 80%;
  }
}
div.page {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  justify-content: flex-end;
  position: relative;
  right: 36px;
}
div.detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  div.text-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    div.text-card {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      span {
        width: 98%;
        height: 40px;
        font-size: 17px;
        line-height: 40px;
        display: block;
        margin: 5px;
        text-align: center;
        font-weight: 700;
      }
      span.yello {
        color: black;
        background-color: #ffd966;
      }
      span.red {
        color: white;
        background-color: #ff0400;
      }
    }
  }
  div.charts {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  div.table {
    div.container {
      margin-left: -50px;
      width: 100%;
    }
  }
}
</style>
